<template>
	<div class="wrapf">
		<p>修改密码</p>
		<input class="langf" type="text" placeholder="个人账号"/><br />
		<input class="langf" type="text" placeholder="请输入密码（6-20位号码字符串）"/><br />
		<input class="langf" type="text" placeholder="请再次输入密码确认"/><br />
		<input type="text" placeholder="验证码"/>
		<yanzhengmaf></yanzhengmaf>
		<br />
		<input class="langf" type="text" placeholder="手机验证码"/>
		<div class="tijiaof1">添加修改</div>
		<div class="huoquf">获取验证码</div>
		<div class="gongxif">
		    <img src="../assets/img/fyx/duihaohuang.png"/>
		    <span>恭喜您修改成功</span>
		</div>
	</div>
</template>

<script>
	import yanzhengmaf from '@/components/yanzhengmaf'
	export default {
		methods: {
			xiugaimm: function() {
                  $(".tijiaof1").click(function(){
                  	  $(".gongxif").animate({
                  	  	  opacity:1
                  	  },1000,function(){
                  	  	  $(this).animate({
                  	  	  	opacity:0
                  	  	  },1000);
                  	  });
                  });
			},
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.xiugaimm();
		},
		components: {
			yanzhengmaf
		}
	}
</script>
    
<style>
    .wrapf {
		width: 1085px;
		float: left;
		height: 625px;
		margin-left: 20px;
		border: 1px solid #e7e7e7;
		position: relative;
	}
	.wrapf p:first-child{
		font-size: 18px;
		color: #323333;
		padding: 20px;
		box-sizing: border-box;
		border-bottom: 1px solid #CCCCCC;
	}
	.wrapf input{
		background: rgb(249,249,249);
		border: solid 1px #d3d3d3;
		height: 44px;
		margin-bottom: 30px;
		font-size: 16px;
		width: 113px;
		box-sizing: border-box;
		padding-left: 10px;
		margin-left: 40px;
	}
	.wrapf input:first-of-type{
		margin-top: 40px;
	}
	.wrapf .langf{
		width: 307px;
	}
	.tijiaof1{
		width: 150px;
		height: 50px;
		background-color: #f08200;
		border-radius: 5px;
		text-align: center;
		line-height: 50px;
		color: #ffffff;
		font-size: 20px;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		margin-left: 40px;
	}
	.huoquf{
		width: 100px;
		height: 32px;
		background: rgb(73,142,61);
		font-size: 14px;
		color: #ffffff;
		text-align: center;
		line-height: 32px;
		border-radius: 5px;
		position: absolute;
		top: 408px;
		left: 241px;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.gongxif{
		width: 454px;
		height: 184px;
		background-color: rgba(0,0,0,0.15);
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		color: #ea5b0c;
		position: absolute;
		right: 100px;
		bottom: 232px;
		opacity: 0;
	}
	.gongxif img{
		width: 42px;
		height: 42px;
		margin-right: 20px;
	}
</style>